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nociones bdsicas 


Java y Javascript _ 

Java es un lenguaje de programacion (como el Pascal, el BASIC o el C y C++) que fue 
desarrollado por la empresa Sun fundamentalmente para crear aplicaciones para 
Internet. El lenguaje Java es completo, es decir permite realizar cualquier operation 
sobre el ordenador (como por ejemplo borrar un archivo) y su aprendizaje es costoso. 

Javascript es lo que se conoce como lenguaje script, es decir: se trata de codigo 
de programacion que se inserta dentro de un documento. Javascript fue desarrollado 
por la empresa Netscape con la idea de potenciar la creation de paginas Web 
dinamicas para su navegador Navigator. 

Javascript (en contra de lo que se podria suponer) es totalmente distinto de Java. 
Java crea programas totalmente independientes y operativos; Javascript es mas 
sencillo porque lo unico que permite es insertar codigo especial dentro del HTML de 
una pagina, su funcion es ampliar las posibilidades de HTML. Javascript no crea 
programas independientes, dependen por completo del codigo HTML de la pagina. 

El codigo en Java se debe compilar (convertir en instrucciones del ordenador) y 
entonces podra ser utilizado por los navegadores (son las famosas applets). Sin 
embargo Javascript es interpretado directamente por el navegador; de hecho el 
codigo Javascript se incrusta dentro del codigo HTML de la pagina. 

Java no puede acceder a los elementos HTML de una pagina (ya que su 
funcionalidad es mucho mayor) sin embargo Javascript necesita acceder a ellos, de 
otro modo no tendria sentido su uso. 

La ventaja fundamental de Javascript es que su aprendizaje y uso son muy 
sencillos y que permite realizar labores complejas en una pagina sin necesidad de 
aprender CGI. 

versiones de Javascript _ 

Puesto que JavaScript fue desarrollado por Netscape, los navegadores de esta 
empresa lo incluyen desde la version 2. Microsoft por su parte incluyo en la version 3 
una variante de este codigo llamado JScript que es casi identico al original 
JavaScript. Despues se estandarizo el lenguaje, aunque ambas companias poseen 
elementos que no son comunes con el estandar (aunque practicamente todo el 
estandar es reconocido por ambas). 

Asi aparicion el JavaScript 1.1 que es admitido por Navigator 3 y por Explorer 4. Y 
las versiones 1.2 y 1.3 que son reconocidas por las versiones 4 y posteriores de ambos 
navegadores. 

La ECMA (asociacion industrial para la normalization) definio un lenguaje 
estandar llamado ECMAScript que intentaba agrupar a los anteriores e incluia 
instrucciones nuevas 

http://www.ecma-international.org/publications/standards/Ecma-262.htm 
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inclusion de Javascript en las paginas _ 

Para hacer que un documento HTML incluya instrucciones en Javascript se debe 
hacer uso de la etiqueta <SCRIPT> de esta forma: 


| <script language="JavaScript"> 

codigo JavaScript 

</script> 

Si se quiere especificar que version de Javascript se utiliza, para evitar que 
navegadores que no soportan la version decodifiquen el Javascript, entonces se usa, 
por ejemplo: 

<script language="JavaScriptl.3"> 


navegadores no compatibles _ 

Los navegadores que no soportan Javascript, no interpretarian las instrucciones 
Javascript sino que mostrarian el texto de las instrucciones en la pagina. Para evitar 
que estos navegadores lean el codigo en Javascript se hace: 


<script language="Javascript"> 
<!- 

codigo JavaScript 

//—> 

</script> 


El signo indica principio de comentario en HTML y el signo >” indica fin de 
comentario. A su vez el signo “//” indica comentario en Javascript (el interprete de 
Javascript no tendran en cuenta esa linea). 

uso de un archivo externo 


Tambien se puede utilizar el codigo JavaScript escrito en un archivo separado. Este 
archivo debe tener la extension js. En el archivo se coloca solo codigo en JavaScript. 
Despues ese codigo se puede invocar desde la pagina web con el codigo: 

| <script language="Javascript" src="archivo.js"> 


normas de escritura en Javascript 

® Los comentarios deben empezar con el simbolo //si son de una sola linea o 
iniciarse con los simbolos /* y finalizar con */ si son de varias lineas. 

® Las lineas de codigo terminan con el signo de punto y coma (;) 

® Javascript distingue entre mayusculas y minusculas 
® Las llaves ({ y }) permiten agrupar codigo. 
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variables y eperadores 


variables _ 

Una variable es un elemento que tiene un determinado nombre y que permite 
almacenar valores. 

nombre de las variables 

Deben empezar con una letra la cual puede ir seguida de numeros, el signo o mas 
letras. 

valores 

Los valores que pueden asignarse a una variable pueden ser: 

® Cadenas de texto: “esto es una prueba”, ‘prueba’ o “esto es una ‘prueba’ de 
codigo”. Siempre se encierran entre comillas dobles o simples. Una variable de 
texto que no tiene contenido, se dice que tiene valor null. La palabra null es un 
termino reconocido por Javascript. 

® Valores numericos: l, -too, 1.6, 2.0E2. 

® Valores booleanos: true o false. 

caracteres especiales _ 

Los valores de tipo texto van entre comillas y dentro de ellos se pueden colocar 
caracteres especiales (caracteres que no se pueden ver, como el cambio de linea) los 
cuales son: 

® \a: Alarma 

® \b: Retroceso (cursor una position hacia atras). 

® \f: Nueva pagina de impresora 
® \n: Nueva linea 
® \r: Retorno de carro 
® \t: Tabulador 
® \\: Signo “\” 
declaration de una variable 

Para declarar una variable se puede emplear: 
var variable = valor; 

O simplemente: 
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| variable = valor; 

De tal modo, que realmente en Javascript no hace falta declarar una variable antes de 
su uso. Ejemplos: 


I var testear = 0; 

testeaTexto = "Mi casa"; 
SeleccionarColor = true; 


JavaScript permite que una variable pueda almacenar distintos tipos de datos en cada 
trozo de codigo. Es decir, una variable que ahora almacena texto, despues puede 
almacenar numeros. 

Tras declarar la variable, su valor puede cambiar mediante la asignacion de un 
valor: 


| Testear = 12.3; 

O mediante la asignacion del resultado de una operation: 

| Testear = 12 * 3 + varX; 

conv ersion de datos 

En muchas lenguajes si una variable toma valores de texto y luego se quiere hacer que 
tome numeros, resulta imposible hacerlo. No es el caso de JavaScript ya que realiza 
conversiones implicitas. Ejemplo: 


var x="50" //x es una variable de texto 

var y=30 //y es una variable numerica 

zl=x+y //zl es variable de texto y vale "5010" 

I z2=y+x //z2 es numerica y vale 60 

/*dependiendo de cual sea el primer operando, se determina 
el tipo del resultado*/ 

Naturalmente ocurrira un error si pretende convertir a un numero, un texto normal 
como “Hola” por ejemplo. En cualquier caso no conviene hacer conversiones de tipo 
en ningun caso. 
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operadores _ 

Los operadores son los elementos que permiten realizar operaciones con los datos del 
codigo. 


operadores aritmeticos 


Operador 

Significado 

+ 

Suma 

- 

Resta 

* 

Multiplicacion 

/ 

Dividir 

% 

Resto de la division 

++ 

Incremento 

-- 

Decremento 


Ejemplo: 

var valorl=50; 
var valor2=10; 
var valor3=20; 

var suma, resta, producto, division, resto; 
var incremento, decremento; 

sumavy^iorl+valor2;: //suma vale 60 
resta=valorl-valor2; //resta vale 40 
producto=valorl*valor2; //producto vale 5000 
division=valorl/valor3; //division vale 2,5 
resto=valorl%valor3; //resto vale 10 

valorl++; //valorl vale 5 m 
valorl 1 —; //valorl. vale 50 

incremento=valorl++; //incremento vale 50 y valorl vale 51 
decremento=valorl—; //decremento vale 51, valorl vale 50 

incrementO=++valorl; //incremento vale 51 y valorl tambien 
decremento=—valorl; //decremento y valorl valen 50 
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operadores logicos 

Trabajan con proposiciones matematicas (valores boleanos) son: 


Operador 

Significado I 

&& 

AND (Y logico) 

II 

OR (0 logico) 

1 

NOT (NO logico) 


operadores de comparacion 

Son: 


Operador Significado 

== 

Igual 

!= 

Distinto 

> = 

Mayor o igual 

< = 

Menor o igual 

> 

Mayor 

< 

Menor 


operadores de asignacion 

Son: 


Operador Ejemplo 

+= 

Suma y asignacion 

-= 

Resta y asignacion 

*= 

Producto y asignacion 

/= 

Division y asignacion 

%= 

Resto y asignacion 


7 





Manual de referenda de JavaScript- Jorge Sanchez '2003 


Mensajes 


cque son? _ 

Se trata de ventanas que desde el codigo se lanzan al usuario para hacer que este 
reaccione ante una situation o nos informe ante una duda. Realmente todos los 
mensajes se obtienen a traves del objeto window (vease mas adelante). 


alert 


Es el mensaje mas usado. Saca un mensaje por la pantalla el cual solo deja la 
posibilidad de aceptarle. Su uso es mostrar informacion al usuario pero resaltandola 
de la pagina. Su sintaxis es: 

alert (texto_del_mensaje); 


prompt 

En este caso se trata de una ventana que pide entrar datos al usuario. De modo que 
esta funcion devuelve un valor que se puede usar en el codigo si es asignado a una 
variable. Su sintaxis es: 

prompt (texto_del_mensaje,valor_por_defecto); 

El segundo parametro (valor por defecto) no es obligatorio incluirle y permite asignar 
un valor al cuadro de texto en el que el usuario tendra que introducir informacion. 

Ejemplo de uso de prompt: 

| respuesta=prompt ("£,Que quieres hacer?", "comer") ; 

En el ejemplo, el resultado de lo que el usuario responde se almacena en la variable 
resultado y al principio la ventana contendra el valor comer en el cuadro de texto 
destinado al usuario. Naturalmente, el usuario podra variar este valor si lo desea. 

El cuadro de dialogo que saca prompt posee dos botones, uno es el de Aceptar y 
el otro es el de Cancelar. Si el usuario pulsa Cancelar, la funcion prompt devuelve el 
valor nulo (null). 

confirm 

Saca un mensaje de confirmation el cual suele tener dos botones: Aceptar y Cancelar. 
Sintaxis: 

confirm (texto_del_mensaj e) 

La ventana mostrara el texto elegido (normalmente es una pregunta) y el usuario 
elegira si desea aceptar o no el contenido. Confirm devuelve un valor true en el caso 
de que el usuario acepte el mensaje, y false si no lo hace. 
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estructuras condicionales 


introduccion 


Las estructuras de este tema son sentencias que permiten tomar decisiones dentro del 
codigo a fin de devolver un resultado u otro dependiendo de una determinada 
circunstancia que es la que se evalua. 

instruccion if 


La instruccion IF realiza lo que se denomina un si logico. Su forma es: 


I if (condicion) { 

..codigo que se ejecuta si la condicion es cierta 

Tambien admite esta otra: 


I if (condicion) { 

..codigo que se ejecuta si la condicion es cierta 

}else{ 

.codigo que se ejecuta si If condieion es falsa 

| 1 

Se admite dentro de una instruccion IF, colocar otra instruccion IF. A esto se le llama 
“anidar” condiciones if. 

bucle while 

Un bucle es una estructura de programacion que permite repetir sentencias hasta que 
se cumpla una determinada condicion. Su forma es: 


I while (condicion){ 

... sentencias que se ejecutan mientras la condicidn se cumpla 

1 

Ejemplo: 


var x=l; 
while(x<ll) 
f 

document.write (x," "); 
x++; 

} 

// Sale 3456789 10 
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bucle for _ 

Su efecto es muy similar a la anterior estructura. Permite ejecutar una serie de 
sentencias hasta que se cumpla una determinada condicion.. Su estructura es: 

for (valor_inicial; condicioitej. actualizacion) 

{ 

I ..sentencias que se ejecutan mientras la condicion se cumpla 

1 

Ejemplo: 

for(x=l;x<ll;x++) 

{ 

document.write (x," "); 

} 

// Sale t| 3 4 5 6 7 8 9 10 


break 


Es una instruccion que hace que el navegador que se la encuentra, abandone 
inmediatamente el bucle en el que esta inmerso. 

continue 


Es parecida a la anterior, solo que en lugar de abandonar el bucle, lo que hace el 
navegador es dejar de leer las siguientes instrucciones del bucle y saltar al principio 
del mismo. 

instruccion switch 

Esta instruccion permite un mayor control sobre las condiciones, lo malo es que se 
incluyo en la version 1.2 de JavaScript por lo que solo los navegadores con version 4 o 
posterior los pueden usar. 

Su sintaxis es: 


switch (objetodeanalisis) { 

case valori;-:: instrucciones 

case valor2 : . .instrucciones 

default: instrucciones 

| 1 

Switch funciona de esta forma: en los parentesis se coloca una expresion a evaluar, y 
en cada apartado case, se coloca un posible valor de la expresion. Los valores que se 
cumplan haran que se ejecuten las instrucciones que les siguen. En caso de que no 
cumpla ninguna se ejecutarian las correspondientes al default (no es obligatorio 
poner este apartado). Ejemplo: 
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var x=12; 
switch(x) { 

case 4:document.write("Es cuatro");break; 

case 8:document.write("Es ocho");break; 

case 12:document.write("Es doce");break; 

default: document.write("No es ninguna de las anteriores") 

} 

Hace falta poner la instruction break ya que de otro cuando se encuentra el valor que 
cumple la expresion, se ejecuta su “case” y los “case” siguientes. 
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Funciones y Objeles 


funciones 


introduccion 

Como en otros muchos lenguajes, en Javascript se pueden utilizar funciones. Las 
funciones son una serie de instrucciones que realizan una determinada tarea. A las 
funciones se las pone un nombre que luego puede ser utilizado en el codigo de la 
pagina. 

definicion de una funcion 

Antes de poder usar una funcion en el codigo de la pagina, se la debe definir; es decir, 
se debe indicar que operaciones son las que debe hacer la funcion. La definicion de la 
funcion es: 


function nombredelafuncion(argumentol, argumento2,...) 

{ 

instrucciones que debe realizar la funcion 

1 


El codigo que esta encerrado entre Haves indica lo que realiza la funcion (por ejemplo 
mostrar un mensaje de ayuda), cada vez que desde el codigo se llame a la funcion, esta 
realizara sus instrucciones. 

Por otro lado los argumentos son variables que algunas funciones necesitan para 
realizar su tarea 

llamar a una funcion 

Para usar (invocar) una funcion en el script, basta con poner su nombre seguido de 
los parentesis. 

Ejemplo: 

I function error() { 

document.write ("<b>Ocurrio un error</BXBR>") ; 

I 


En este caso se define una funcion que muestra texto en la position actual del cursor. 
Para utilizar esta funcion desde el codigo seria: 

| error(); 

Lo cual mostraria el mensaje de error. Otro ejemplo (pagina HTML completa): 

I <HTML> 

<HEAD> 

<TITLE>Titulo</TITLE> 
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<SCRIPT LANGUAGE="JavaScript"> 

< ! — 

function doblar(valor) { 
return valor * 2; 

if— > 

</ SCRIPT> 

<BODY> 

<SCRIPT LANGUAGE="JavaScript"> 
document.write("El doble de 100 es ",doble(100)); 
</SCRIPT> 

</BODY> 

</HTML> 


En este caso la funcion doblar(), posee un argumento (valor), el cual es necesario ya 
que esta funcion calcula el doble de ese numero. Ademas esta funcion devuelve un 
valor que el codigo puede utilizar, eso lo realiza la instruction return, la cual sirve 
para regresar un valor que el codigo puede mostrar o asignar a una variable. 

funciones predefinidas _ 

JavaScript trae consigo muchas funciones predefinidas. Senalamos aqui algunas de 
las mas importantes: 

© eval(textoCodigo ). La funcion eval tiene un unico parametro que es una 
cadena de texto. Esta funcion hace que el texto sea interpretado como si fuera 
codigo normal de JavaScript. Ejemplo: 

| eval ("alert ( 'Hoi#;* ) ") ; 


© parselnt (textoNumero, base). Convierte el texto (que debe tener cifras 
numericas) a formato de numero. El segundo parametro es opcional y representa 
la base del numero, ejemplo: 

| alert(parselnt("110011",2));//Sale 51 

Si la conversion no es posible, devuelve el valor NaN (Not a Number) que indica 
que la variable numerica posee un valor invalido 

© parseFloat(textoiVumero). Convierte el texto (que debe tener cifras 
numericas) a formato de numero con decimales. 

® escape(texto). Muestra el codigo ASCII de los simbolos del texto. Cada numero 
en el resultado va precedido del simbolo % y el codigo ASCII sale en forma 
Hexadecimal. 

© unescape( texto). Hace justo lo inverso del anterior. Devuelve los codigos que 
representan los codigos ASCII en forma de texto que se le pasa como parametro. 
Ejemplo: 
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I document.write(unescape("%21%B1")) ; 
// Escribe: ;• 


© isNaN (expresion). Devuelve true si la expresion tiene un contenido no 
numerico. 


objetos 

Los objetos son una de las bases fundamentales de JavaScript. Un objeto es una 
agrupacion de variables, que en ese caso se llaman propiedades, y de funciones, las 
cuales se llaman metodos. Las propiedades definen las caracteristicas de los objetos 
y los metodos las operaciones que podemos hacer con el. 

JavaScript posee muchos objetos predefinidos y tambien permite crear nuestros 
propios objetos. 

propiedades 

Como ya se comento anteriormente, los objetos poseen propiedades asociadas, para 
acceder a ellas se utiliza el punto, en esta forma: 

| objeto.propiedad 

Ejemplo, un objeto llamado miordenador que representa a un ordenador: 

I miordenador.marca="HP"; 

miordenador.procesador="pentium III 900 Mhz" 
miordenador »ram=64; 


Las propiedades pueden ser de distintos tipos de datos; en el ejemplo la propiedad 
ram es numerica, mientras que marca es de tipo texto. 

metodos 

Los metodos son funciones asociadas a los objetos. Su uso es: 

| objeto.metodo() 

Donde el metodo ademas puede poseer parametros. 

operacion new 

La instruction new sirve para crear nuevos objetos en el tiempo de ejecucion del 
codigo JavaScript. Ejemplo: 

| miordenador = new ordenador("HP", "Pentium III", 64); 

En este caso mi ordenador es un nuevo objeto de tipo ordenador, al indicar el tipo 
de objeto que es, se le pueden pasar parametros para rellenar sus propiedades. 
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objetos predefinidos 


string 

El objeto string sirve para manejar cadenas de texto. Cada vez que creamos una 
variable de cadena, en realidad estamos creando una variable de tipo string. Por lo 
tanto no sera necesaria su declaration. 

Metodos de String 


© anchor (nombre). Crea un marcador en el texto. 

© big(). Muestra la cadena de caracteres con una fuente grande. 

® blink(). Muestra el texto de modo intermitente. 

® bold(). Muestra el texto en negrita. 

® charAt(n). Muestra el caracter situado en la position n de la cadena. 

® fixed(). Muestra la cadena en fuente no proporcional. 

® fontcolor(color). Determina el color del texto. 

® fontsize(n). Muestra el texto en el tamano n, donde n es un numero del 1 al 7 
(los 7 tamanos estandar). 

® indexOf (cadenalntema,initio). Devuelve la position de la cadena interna 
en el texto, teniendo en cuenta que el primer caracter es el numero o. El primer 
parametro es el texto que se busca; el segundo es opcional e indica desde que 
position del texto comenzamos a buscar. Si no se encuentra la cadena interna, se 
devuelve el valor -1. Ejemplo: 

I var cadena="Miguel Indurain" 
var subcadena="Indurain" 
alerr(cadena.indexOf(subcadena)) 

/*E1 resultado sera 7, ya que la primera posicion del 
texto (en este caso la 'M') es la 0. 

® italics(). Muestra el texto en cursiva. 

© lastlndexOf icadenalntema,inici 6 ). Identico a indexOf solo que en este 
caso cuenta la ultima vez que aparece la cadena (en lugar de la primera vez como 
hace indexOf). 

® link (JJRL). Crea un hipervinculo en la cadena de texto, el parametro URL 
indica el destino del vinculo. 

® small (). El texto se muestra con fuente pequena. 

® strikeQ. Subraya el texto. 
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® sub(). El texto va en submdice. 

® substring^, y). Muestra el fragmento de texto que va desde la position x a la 
position y. Ejemplo: 

I var cader.a="Mi gue Lon Indurain"; 
var subcadena="Indurain"; 
alert(cadena.substring(5,11)); 

//Sale Ion In 

® sup(). Superindice. 

® toLowerCase(). Convierte la cadena a minusculas. 

® toUpperCase(). Convierte la cadena a mayusculas. 

Propiedades de string 

® length. Almacena el tamano de la cadena de texto. 

Math 

El objeto Math tiene propiedades y metodos que representan valores matematicos. 
metodos de math 

® abs(n). Calcula el valor absoluto de n. 

® acos (n). Calcula el arco coseno de n. 

® asin(n). Calcula el arco seno de n. 

® atan(n). Calcula el arco tangente de n. 

® ceil(n). Redondea n a su valor superior. 

® cos (n). Calcula el coseno de n. 

® exp (n). Calcula e n . 

® floor(n9. Redondea n a su valor inferior. 

® log in). Calcula el logaritmo de n. 

® max(x,y). Devuelve el mayor valor de x o y. 

® min(x,y). Devuelve el menor valor de x o y. 

® pow(x,y). Devuelve el x>'. 

® random(). Genera un numero aleatorio entre oyi. Ejemplo: 

I alert(Math.random()) 

// Pooria devolver por ejemplo 0.239230812349 
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® round(n). Redondea n a el numero mas proximo. 

® sin(n). Calcula el seno de n. 

® sqrtCnJ. Calcula la raiz cuadrada de n. 

® tan(iy). Calcula la tangente de n. 

propiedades de math _ 

® E. Devuelve la constante de Euler o numero e. 

® LN2. Devuelve el logaritmo neperiano de 2. 

® LNio. Devuelve el logaritmo neperiano de to. 

® LOG2E. Logaritmo en base 2 de e. 

® LOG10E. Logaritmo en base 10 de e. 

® PI. Devuelve el numero PI. 

® SQRTi_2. Raiz cuadrada de 0,5. 

® SQRT2. Raiz cuadrada de 2. 

objeto Date() 

Este objeto representa fechas y horas. JavaScript no permite trabajar con fechas 
anteriores a 1970, ya que desde ese momento es cuando comienza a contar las fechas 
en milisegundos. En los meses, el mes o sera Enero, y el mes 11 es Diciembre. Los dias 
de la semana y del mes se cuentan desde el numero 1 (Jueves = 4). 

Para crear una variable de fecha se puede hacer de esta manera: 

I fecha=new Date (); 

//crea un nuevo objeto de fecha cuyo valor inicial serajx ; 
//la fecha y hora actuales 

Si se desea iniciar una variable de fecha con valores distintos a la fecha actual, se 
debe: 

| fecha=new Datefano, mes, dia, hora, minutos, segundos"); 

Todos los parametros se pasan en forma de numeros. Tambien se puede crear un 
objeto de tipo fecha asignando el numero de milisegundos desde 1970. 

metodos de los objetos date() 

® getDate(). Devuelve el dia del mes. 

® getDay(). Devuelve el dia de la semana en forma de numero. 
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® getFullYear(). Devuelve el ano, pero en forma de 4 numeros. Con esto se 
asegura la compatibilidad con el ano 2000. Esta funcion se anadio al JavaScript 
1.3, por lo que ciertos navegadores no podran usarla. 

® getHours(). Devuelve la hora. 

® getMimites(). Devuelve los minutos. 

® getMonth(). Devuelve el mes (con numeros del o al 11). 

® getSeconds(). Devuelve los segundos. 

® getTime(). Devuelve el numero de milisegundos de la fecha, empezando a 
contar desde 1970. 

® getTimezoneOffset(). Devuelve la diferencia en minutos entre la zona horaria 
actual y la hora solar (GMT). 

® getYear(). Devuelve el ano. 

® setDate(uaZor). Establece el dia del mes. 

® setFullYear(uaior). Establece el ano (con cuatro cifras). 

® setHours (valor). Establece la hora. 

® setMimites(uaZor). Establece los minutos. 

® setMonth(uaior). Establece el mes (con un numero del 1 al 11). 

® setSeconds (valor). Establece los segundos. 

® setTime(uaZor). Establece la fecha con el numero de milisegundos desde el 1 
de Enero de 1970. 

® setYear(uaZor). Establece el ano. 

® toLocaleStringO. Devuelve la fecha en formato de texto, segun las 
especificaciones de la zona horaria del ordenador. 

objeto array _ 

Los arrays (matrices) son elementos indispensables en la programacion de 
ordenadores. Un array es un conjunto de datos agrupados. Para acceder a cada 
elemento individual de el array se usa un numero de indice, el primer elemento 
tendra el indice o. En el caso de los arrays de JavaScript, su uso es muy eficaz y 
mucho mas libre que en los lenguajes formales (como Pascal por ejemplo). 

Para crear un array se hace: 

| nombrearray = new Array() 

Esto crea un array de tamano indeterminado. 
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Para rellenar los valores del array: 

I nombrearrayfO] = valor; 
nombrearray[1] = valor; 

nombrearray[n] = valor; 


Tras asignar valores el array se hace mas grande. Tambien se puede especificar su 
tamano al crearle: 

| nombreArray= new Array (tamano) 

O incluso asignar valores en la propia creation del array. Ejemplo: 

| equipos= new Array("Real Madrid", "F. C. Barcelona"); 

Ademas un array puede tener distintos tipos de datos: 

| miOrdenador = new Array("HP", "Pentium III", 64); 

Y cada elemento de un array puede ser otro array: 

I elemento = new Array(8); 
elemento[3] = new Array(5); 

metodos del objeto array 

© concat(array). Agrupa dos arrays. Disponible desde la version 1.2. Ejemplo: 

I a = new Array(12 r 3, 5) ; 

b = new Array("Hola", "Adios"); 
c = a.concat(b) ; 

//c es el array (12, 3, 5, "Hola", "Adios") 

® join(). Saca una cadena de texto que contiene todos los elementos del array: 

I a = new Array("Rojo", "Azul", "Verde"); 
b = a.join(); 

//b contiene "Rojo,Azul,Verde" 

© reverse(). Invierte el orden del los elementos de un array. El primero pasa a ser 
el ultimo y viceversa. 

© Sort(). Obtiene la matriz de manera ordenada. 

Propiedades del objeto Array 

® length. Cuenta el numero de elementos del array. 
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objetos del navegador 


introduction 

Los objetos del navegador son todos aquellos objetos que el navegador pone a nuestra 
disposition para poder modificar los elementos de las paginas. 

El problema es que Explorer y Navigator utilizan modelos de objetos distintos. En 
este documento solo se comentan los objetos y propiedades comunes. Los objetos 
son: 


navigator 

Objeto que representa al navegador con el que el usuario esta mostrando la pagina. 
Gracias a este objeto se puede averiguar la marca y version del navegador y utilizar 
esta information en el codigo. 

propiedades 


® appCodeName. Nombre del codigo del navegador. Todos los navegadores 
devuelven la cadena Mozilla. Por lo que esta propiedad no es interesante. 

® appName. Nombre del navegador. Podra ser: Microsoft Internet Explorer 
o Netscape. 


® appVersion. Version del navegador. La cadena que devuelve esta propiedad 
indica la version completa. Ejemplos: 


Cadena devuelta por appVersion 

Navegador 

4.0 (compatible; MSIE 6.0; Windows NT 
5 - 0 ) 

Explorer 6 para Windows 2000 

4.0 (compatible; MSIE 5.5; Windows NT 

50 ) 

Explorer 5.5 para Windows 2000 

4.0 (compatible; MSIE 6.0; Windows 
2000) 

Opera 6 para Windows 2000 

5.0 (Windows; es-ES) 

Netscape 6 en espanol 

4.75 [en] (Windows NT 5.0, U) 

Netscape 4.75 

4.5 [es] C-CCK-MCD (WinNT;I) 

Netscape 4.5 


® language o browserLanguage. language es una propiedad que solo 
funciona con Netscape, mientras que browserLanguage solo funciona con 
Explorer. Pero ambas devuelven el lenguaje del navegador. En ambos casos las 
dos primeras letras que devuelven son el lenguaje del navegador (es=Espanol; 
en=Ingles, por ejemplo). 

® platform. Contiene el tipo de sistema operativo del ordenador del usuario. 
Win32 indicaria un sistema Windows 95/98/Me/NT/2000. Otros valores son: 
Wini6 (Windows 3.1 y anteriores) Mac68x (McIntosh clasico) MacPPC 
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(McIntosh Power PC) y varios resultados que empiezan por Unix (sistemas 
Unix). 


® userAgent. Devuelve information sobre la version, codigo y nombre del 
navegador. Su salida no aporta nada nuevo respecto a las anteriores propiedades. 
Ejemplos: 


Cadena devuelta por userAgent 

Navegador 

Mozilla/4.0 (compatible; MSIE 6.0; 
Windows NT 5.0) 

Explorer 6 para Windows 2000 

Mozilla/4.0 (compatible; MSIE 5.5; 
Windows NT 5.0) 

Explorer 5.5 para Windows 2000 

Mozilla/4.0 (compatible; MSIE 5.0; 
Windows 2000) Opera 6.0 [es] 

Opera 6 para Windows 2000 

Mozilla/5.0 (Windows; U; Windows NT 
5.0; es-ES; rv:o.9.4) Gecko 20011128 
Netscape6/6.2i 

Netscape 6.21 en espanol 

Mozilla/4.75 [en] (Windows NT 5.0, U) 

Netscape 4.75 

Mozilla/4.5 [es] C-CCK-MCD (WinNT;I) 

Netscape 4.5 


screen _ 

Objeto disponible desde la version 1.2 de JavaScript (navegadores 4 o superiores). 
Permite acceder a las propiedades de la pantalla del usuario. 

propiedades 

® width y height. Respectivamente, anchura y altura total de la pantalla. 

® availWidth y availHeight. Respectivamente, anchura y altura disponible en la 
pantalla tras restar la barra de tareas del sistema operativo. Esta medida no es 
muy exacta ya que no tiene en cuenta la personalization del usuario. 

® colorDepth. Numero de bits por pixel que utiliza la pantalla. 


window 

Este objeto, representa a la ventana en la cual se ve la pagina web. En el caso de que la 
pagina tenga marcos, se generan tantos objetos window como marcos haya. 

propiedades 

® closed. Valor booleano que indica si una ventana ha sido cerrada. 

® defaultStatus. Texto que la barra de estado mostrara cuando se cargue la 
pagina web (texto por defecto de la barra de estado). 

® frames. Array que representa a todos los marcos de la ventana. 
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® history. Es un objeto (se vera mas adelante) que representa las enlaces a las 
paginas a las que el visitante habia accedido antes de llegar a la ventana actual. 

© location. Objeto que almacena information sobre el URL de la pagina actual. 

© name. El nombre de la ventana. 

® parent. Ventana “padre” de la actual. Si la actual es un marco, parent sera la 
pagina con etiqueta <FRAMESET>. 

© self. Se refiere a la propia ventana activa. 

® top. Ventana superior del navegador. 

® status. Mensaje de la barra de estado. 

® window. Igual que self. 

metodos 

® open (JJRL,nombreVentana,opcionesVentand). Abre una nueva ventana 
cuyo contenido se especifica por la URL a una pagina (este parametro puede 
quedar vacio se indica un nombre y, opcionalmente, una serie de opciones 
entre comillas y separadas por comas. Estas opciones son (Netscape tiene 
algunas opciones mas que aqui no hemos listado): 

• toolbar. Indica con yes o no si se muestra la barra de herramientas. 

• location. Muestra o no la barra de direction. 

• directories. Muestra o no los botones de directorio. 

• status. Permite mostrar u ocultar la barra de estado. 

• menubar. Mostrar o no la barra de menus. 

• scrollbars. Indica si se muestran las barras de desplazamiento. 

• resizable. Permite ajustar el tarnano de la ventana. 

• width. Ancho de la ventana en pixeles. 

• height. Altura de la ventana en pixeles. 

• copyHistory. Permite copiar el historial de paginas recorridas a la nueva 
ventana. 

Ejemplo: 

I nuevaVentana=open"nueva","toolbar=no,menubar=no, 
scrollbars=no, 1 ocat.i or.="r.o, width=180, height=60") ; 


® close(). Cierra la ventana. 
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® blur(). Hace la ventana deje de estar activa (a esta action se la llama perder el 
foco). 

© focus(). Hace que la ventana sea la ventana activa (la que tiene el “foco”). 

® setlnterval(expresi 6 njavascript,milisegundos).. Crea un temporizador. 
El temporizador es un reloj que cada ciertos milisegundos (los que se indiquen 
como segundo parametro, realiza la tarea indicada en el argumento expresion. La 
expresion es codigo JavaScript el cual se coloca entre comillas, normalmente este 
codigo es simplemente la invocation a una funcion. este funcion devuelve un 
numero de temporizador (ya que se pueden crear varios) el cual debera 
almacenarse en una variable para posteriores manipulaciones. Ejemplo: 

I var tempID; 

tempID=setInterval("dibujaCirculo();", 1000ms); 

//Hace que cada segunda se llame a la funcion 
dibujaCirculo() . 

© clearlnterval (idTemporizador). Cancela el tiempo de espera establecido 
mediante setlnterval.. Al llamar a este metodo hay que indicar como 
parametro el numero de temporizador que se desea detener. 

© setTimeout(expresi 6 njavascript,milisegundos). Muy similar a 
setlnterval. Cuando pasan los milisegundos invocados, se ejecuta el codigo del 
parametro expresionJavascript (el cual va entre comillas). La diferencia con 
setlnterval es que en este caso solo se usa el codigo una vez, no continuamente 
como ocurre con setlnterval. El metodo devuelve un numero que debe 
almacenarse en una variable. 

® clearTimeout(idTimeOut)- Anula el temporizador establecido anteriormente 
con setTimeOut. 

© alert(), confirm(), prompt(). Metodos de mensajes (vistos en tema anterior). 


location 


Objeto incluido dentro del objeto window. Almacena information sobre la 
localization de la pagina de la ventana y por tanto permite cambiar dinamicamente la 
pagina web que se esta mostrando. 

propiedades 

® href. Especifica la direction URL de la ventana (por ejemplo: 
http://www.uva.eS/problemas/exi.htm#marcai”) 

® hostname. Especifica la parte del URL en la que va el nombre del host 
( www.uva.es ) 

® host. Identico al anterior, solo que al final se indica el numero de puerto 
utilizado (www.uva.es : 8 o) 


23 



Manual de referenda de JavaScript- Jorge Sanchez '2003 


24 


® pathname. Especifica la parte del URL en la que va la ruta al recurso (en el 
ejemplo: /problemas/exi,htm”) 

® port. Puerto utilizado para mostrar la pagina (generalmente el 80). 

® hash. Indica que marcador de la pagina se utilizo al abrir la misma, si no se uso 
ninguno aparece vacio (en el ejemplo seria marcai). 

® protocol. Parte referida al protocolo de la URL (en el ejemplo http). 

® search. La parte de una URL que va detras del signo ?. Solo ciertas paginas 
llevan este signo (en concreto las paginas que llaman a CGIs). 

metodos 

® replace(LZRL). Carga una nueva pagina en la ventana actual indicando su URL 
entre comillas y ademas tambien reemplaza a la pagina anterior en la lista del 
historial. Esto ultimo es la unica diferencia entre usar este metodo y cambiar la 
direction directamente en la propiedad href del objeto location. 

® reload(). Hace que se vuelva a recargar la pagina. 

document 

Este objeto representa al contenido de una pagina web. Esta incluido dentro del 
objeto window. 

propiedades 

® hgColor. Color del fondo 
® fgColor. Color del texto. 

® linkColor. Color de los enlaces normales. 

® vlinkColor. Color de los enlaces visitados 
® alinkColor. Color de los enlaces activos. 

® images. Array que contiene todas las imagenes del documento. El indice del 
array empieza por o, la imagen document.images[o] sera la primera que se 
utilizo en el codigo. Ejemplo: 

I document.images[0].src ="grafico2.gif" 

//Hace que la primera imagen muestre el grafico 
//"grafico2.gif" 


Tambien se puede usar cada imagen en lugar de por el numero, por el nombre 
(atributo NAME de la etiqueta IMG). Ejemplo: 

| document.images["imagenl"}.src="grafico2.gif" 
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I //imagenl debe ser el nombre exacto de la imagen a 
//cambiar. 


© links. Array que contiene todos los enlaces que usan el atributo HREF. El orden 
de los enlaces en la matriz es el orden de uso en el codigo (el primer enlace en el 
codigo sera document.links[o].) Ejemplo: 

I document.links[0].href ="http://www.hola.com" 

I //hace que el primer enlace del documento apunte a la 
| direccion www.hola.com 

© lasModified. Fecha de ultima actualization del documento en forma de cadena 
de texto. Algunos servidores no proporcionan este dato. 

® URL. URL del documento. Es identico a utilizar location.href. 

® cookie. Escribe o lee el archivo de cookies de la pagina web. Un archivo de 
cookies sirve para guardar information sobre el usuario en su propia maquina, 
con esta propiedad se permite hacerlo 

metodos 


® clear(). Borra el documento. 

© write(textoHTML). Escribe el texto indicado en el documento. Ese texto puede 
contener si se desea etiquetas HTML 

® writeln(fexfoiTTML) . Lo mismo que la anterior, solo que esta anade un salto 
de linez tras escribir el texto. 

® close (). Cierra el documento. 

history 

Objeto que representa a las direcciones de las paginas que se almacenan en el 

historial del navegador. Este objeto esta dentro del objeto window. 

propiedades 

® length. Numero de paginas almacenadas actualmente en el historial. 

metodos 

© back(). Hace que la ventana muestre la pagina visitada anteriormente. 

® forward(). Hace que la ventana muestre la pagina siguiente. 

© go(n°). Hace que se muestre la pagina del historial indicada con un numero. De 
modo que history.go(-i) muestra la pagina anterior y history.go(-3) hace que 
se muestre la pagina antepenultima. 
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image 

Objeto que representa una imagen en el documento definida con la etiqueta HTML 
<IMG> o con el codigo JavaScript new Image. Todas las imagenes del documento 
estan contenidas en la matriz de imagenes document.images (ver anteriormente). 

propiedades 

Son las mismas que los atributos de la etiqueta IMG del HTML, por eso solo se 
comentan: 


® 

border 

© 

height 

© 

hspace 

© 

lowsrc 

© 

name 

© 

src 

© 

vspace 

© 

width 

Ejemplo: 


var imagenAtras = new image(120,87); 

//nueva imagen con ancho=120 y altura=87 
imagenAtras.src="dibujogris.gif"; 

//la imagen muestra el archivo dibujogris.gif 


link 


Representa cada enlace de la pagina creado con la etiqueta A. El array 
document.links contiene todos los enlaces del documento, de forma que 
document.links[o] sera el primer enlace escrito en el codigo. 

propiedades 

© href. Especifica la direction URL de Internet del enlace (por ejemplo: 
http://www.uva.eS/problemas/exi.htm#marcai”) 

© hostname. Especifica la parte del URL en la que va el nombre del host 
(www.uva.es) 

® host. Identico al anterior, solo que al final se indica el numero de puerto 
utilizado (www.uva.es :8o) 

® pathname. Especifica la parte del URL en la que va la ruta al recurso (en el 
ejemplo: /problemas/exi,htm”) 
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® port. Puerto utilizado para mostrar la pagina (generalmente el 80). 

© hash. Indica que marcador de la pagina se utilizo al abrir la misma, si no se uso 
ninguno aparece vacio (en el ejemplo seria marcai). 

® protocol. Parte referida al protocolo de la URL (en el ejemplo http). 

© search. La parte de una URL que va detras del signo ?. Solo ciertas paginas 
llevan este signo (en concreto las paginas que llaman a CGIs). 

© target. Indica el destino del enlace (propiedad TARGET de la etiqueta A), 
interesante sobre todo si la ventana tiene marcos. 
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eventes 


introduccion 


Un evento es un suceso que ocurre cuando el usuario realiza alguna action. Por 
ejemplo cuando el usuario pasa el raton encima de un objeto de la pagina, cuando 
pulsa una tecla,... Incluso algunos eventos no los produce el usuario, sino el 
navegador, como por ejemplo la carga de la pagina. 

Los eventos se colocan en etiquetas de HTML (no todas tienen capacidad para 
capturar eventos y ademas nuevamente no son las mismas en Netscape que en 
Explorer), de esta forma: 

I <etiquetaHTML atributos.. . 

nombredeEvento="expresi6nJavaScript ">+ 


De tal forma que cuando se produce el evento en cuestion, se ejecuta el codigo en 
JavaScript que esta entre comillas. Ejemplo: 

I <A HREF="cities .htm" onMouseCLiek="alert ( 'Pulsaste ! ' ) ; "> 
//Cuando el usuario pulsa en el mensaje, aparece un cuadro 
//de alerta que pone "Pulsaste!" 


lista de eventos 


Los eventos son iguales en Netscape y en Explorer, sin embargo no se aplican a los 
mismos objetos, hay mas objetos en Explorer que en Netscape que permiten capturar 
eventos. La lista solo incluye los compatibles en ambos. 

onClick 

Se produce cuando el usuario hace clic en el objeto. Solo los vinculos y los botones de 
los formularios permiten capturar este evento en ambos navegadores. 

onDbICIick 


Se genera cuando el usuario hace doble clic con el raton. Solo los vinculos admiten 
este evento en ambos navegadores. 

onMo useOver 

Se produce cuando el usuario pasa el cursor por encima del objeto. Solo los vinculos 
permiten este evento en ambos navegadores. 

onMouseOut 

Ocurre cuando el usuario abandona el objeto. Solo los vinculos permiten este evento 
en ambos navegadores. 


28 



Manual de referenda de JavaScript- Jorge Sanchez '2003 


29 


onMouseDown 

Se produce cuando el usuario mantiene pulsado el boton principal del raton a la vez 
que se situa encima de un objeto. Funciona en los vinculos, en los botones y en las 
imagenes. 

onMouseUp 

Ocurre cuando el usuario levanta el boton del raton. Funciona en los mismos casos 
que el anterior. 

onMouseMove 

Sucede cuando el usuario mueve el raton. En Netscape ninguna etiqueta lo admite. 

onKeyDown, onKeyPress y onKeyUp 

Ocurren respectivamente cuando el usuario pulsa una tecla, cuando la mantiene 
pulsada y cuando la suelta. Tienen poca utilidad y pocas etiquetas los admiten. 

onLoad 

Se produce cuando la pagina se esta cargando. La etiqueta BODY es la idonea para 
este evento. 

onllnload 

Se produce cuando la pagina se esta descargando, porque se esta cargando otra o 
porque se cierra el navegador. La etiqueta BODY es la idonea para este evento. 

onResize 

Ocurre cuando se cambia el tamano de la ventana. La etiqueta BODY o la FRAME son 
las que manejan este evento. 

onBlur 

Se produce cuando un objeto pierde el foco (deja de ser el objeto activo). La etiqueta 
BODY, los botones, cuadros de formulario y los enlaces admiten esta propiedad. 

o nFocus _ 

Sucede cuando un objeto gana el foco (pasa a ser el objeto activo). La etiqueta BODY, 
los botones, cuadros de formulario y los enlaces admiten esta propiedad. 

onAbort 

Se produce si el usuario pulsa el boton Detener mientras se estaba cargando una 
imagen. La etiqueta IMG es la que maneja este evento. 

onError 

Se produce cuando ocurre un error. Casi todas lo permiten, no obstante su uso no 
parece muy interesante. 
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onChange 

Se produce cuando el usuario cambia el contenido de un cuadro de texto de un 
formulario. 

onSelect 

Ocurre cuando el usuario selecciona texto de un cuadro del formulario. 

onSubmit 

Ocurre cuando un formulario es enviado a su servidor. Es pues un evento de la 
etiqueta FORM. 

on Reset 

Sucede cuando un formulario es anulado mediante su boton Reset. Es pues un 
evento de la etiqueta FORM. 
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